<template>
    <view class="house-card flex-layout-col shadow" @click="navigator">
        <view class="house-card-tag">
			<view class="row">
				<favorite @change="handleSavedStatus" :likeId="detail.likeId" :checked="detail.hasLike" :houseId="detail.id"></favorite>
				<span class="verified" v-if="detail.verified==1">verified</span>
				<!-- <image v-if="detail.type == '1'" src="../../static/sale.png" style="width: 32px; height: 32px; background-color: #fff; border-radius: 50%" mode="aspectFit"></image> -->
			</view>
			<span style="color: #ffffff;font-size: 28rpx;">ID：{{detail.id}}</span>
        </view>
        <view class="house-card-image">
            <!-- <image :src="detail.logo" v-if="detail.logo.endsWith('.avif')" style="width: 100%;"></image> -->
            <u-swiper radius="8px" :height="swipeHeight" :autoplay="false" :list="detail.photoUrls.split(',')" indicator indicatorMode="line"></u-swiper>
        </view>
        <view class="house-card-footer flex-layout-col">
            <view class="flex-layout-row h4" style="justify-content: space-between; align-items: center">
                <house-tag :value="detail.propertyType"></house-tag>
                <!-- <text>{{ detail.createTime }}</text> -->
            </view>
			<view class="row between">
				<price class="gap-col-top" :value="detail.price" :unit="detail.payUnitType" :ratio="detail.payPeriodType"></price>
				<span class="tags" v-if="detail.furnished==1">{{$t('text.furnished')}}</span>
				<span class="tags" v-if="detail.furnished==0">{{ $t('text.unfurnished') }}</span>
			</view>
            <view class="house-card-name gap-col h4">
                <u--text :lines="2" color="#999" size="12px" :text="detail.title"></u--text>
            </view>
            <location :address="detail.address" :city="detail.cityId"  :mapname="detail.mapname" :latitude="detail.latitude" :longitude="detail.longitude"></location>
            <view class="house-card-property">
                <view class="flex-layout-row">
                    <iconfont color="#999" name="icon-bedroom"></iconfont>
                    <text class="house-card-property-value">{{ detail.roomNum }}</text>
                </view>
                <view class="flex-layout-row gap-row2">
                    <iconfont color="#999" name="icon-bathroom"></iconfont>
                    <text class="house-card-property-value">{{ detail.toiletNum }}</text>
                </view>
                <view class="flex-layout-row">
                    <iconfont color="#999" name="icon-area"></iconfont>
                    <text class="house-card-property-value">{{ detail.area + ' sqm' }}</text>
                </view>
            </view>
			<view class="house-card-bottom">
				<text v-if="type==1">{{$t('rent.prompt')}}</text>
				<view class="house-card-contact gap-col-top">
				    <contact :phone="phone" :showText="false" :houseid="detail.id" :detail="detail" :message="1"></contact>
				</view>
			</view>
          
        </view>
    </view>
</template>

<script>
const app = getApp();
export default {
    name: 'house-card',
    props: {
        hideSaved: Boolean,
        detail: Object,
		type:Number
    },
    data() {
        return {
            fav: false,
            swipeHeight: 200
        };
    },

    computed: {
        phone: function () {
            console.log('logo', this.detail.logo)
            if (this.detail.agency) {
                return this.detail.agency.phone;
            } else {
                return '';
            }
        }
    },
    methods: {
        handleLoved(e) {
            this.fav = !this.fav;
        },
        navigator(e) {
            uni.navigateTo({
                url: '/pages/detail/detail?id=' + this.detail.id+"&type="+this.type
            });
        },

        handleSavedStatus() {
            this.$emit('change');
        }
    }
};
</script>

<style lang="scss" scoped>
	.tags{
		padding: 4rpx 8rpx;
		border-radius: 6rpx;
		font-size: 28rpx;
		color: #7e99be;
		background: #e5f0ff;
	}
	.verified{
		margin-left: 12rpx;
		background: #ffffff;
		color: #0066ff;
		border-radius: 4px;
		padding: 6rpx 10rpx;
		font-size: 28rpx;
	}
.house-card {
    position: relative;
    margin-bottom: 20px;
    width: 100%;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    background-color: #fff;
    &-tag {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: absolute;
        left: 10px;
        right: 10px;
        top: 10px;
        z-index: 9;
    }
    &-image {
        flex-shrink: 0;
        height: 200px;
    }
    &-footer {
        padding: $uni-spacing-row-base;
    }
    &-property {
        display: flex;
        align-items: center;
        .flex-layout-row {
            align-items: center;
        }
        &-value {
            margin-left: 10px;
        }
        text {
            color: #999;
            font-size: 12px;
        }
    }
    &-contact {
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
    &-tool {
        flex-shrink: 0;
        height: 68px;
        align-items: center;
        margin-left: $uni-spacing-row-sm;
        margin-right: $uni-spacing-row-sm;
        border-top: 1px solid #f1f0f5;
        .u-button {
            margin: 0 $uni-spacing-row-base;
        }
    }
    &-title {
        justify-content: space-between;
    }
    &-name {
        width: 100%;
        align-items: center;
    }
    &-info {
        justify-content: space-between;
        align-items: center;
    }

    &-address,
    &-title {
        color: #8e8e8e;
    }
    &-price {
        color: #0066ff;
    }
}
.house-card-bottom{
	position: relative;
	text{
		
		position: absolute;
		left: 0;
		top: 46rpx;
		font-size: 20rpx;
		display: block;
		width: 85%;
	}
}
</style>
